<template>
	<view>
		<view class="top">
			<view class="top-font">
				您对菜品满意吗？
			</view>
			<view class="top-content">
				<textarea name="" id="" cols="30" rows="10" v-model="font">
					
				</textarea>
				<uni-file-picker fileMediatype="image" :image-styles="imageStyles" :limit="4" @progress="progress"
					@success="success" @fail="fail" @select="select" />
			</view>
			
			<view class="top-button">
				<view class="top-button-content" v-for="(item,index) in evaluateList" :key="index">
					<!-- <p>{{index}}-{{item.haoping}}</p> -->
					<view class="top-button-content-img">
						<view class="top-button-content-img-img">
							<image src="../../static/Frame 25.png" mode=""></image>
						</view>
						<view class="top-button-content-img-name">
							香卤翅尖
						</view>
					</view>
					<view class="top-button-evaluate">
						
						<image src="../../static/cha.png" mode=""  @tap="NonegativeCommentCicktwo(index)"  v-if="item.negativeComment"></image>
						<image src="../../static/ischa.png" mode=""  @tap="negativeCommentCicktwo(index)"  v-else></image>
						<text>差评</text>
						<image src="../../static/hao.png" mode="" @tap="noPraiseClick(index)" v-if="item.praise"></image>
						<image src="../../static/ishao.png" mode=""  @tap="praiseClick(index)" v-else></image>
						<text>好评</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="application" @click="SubmitComments">
			提交评价
		</view>
		<!-- <view class="applicationtwo" v-if="!csListArrl[index].jia">
			提交评价
		</view> -->
	</view>
</template>

<script>
	import {CommentOrder} from "@/api/home.js"
	export default {
		onLoad(option) {
			this.orderId = Number(option.id) 
			// this.SubmitComments(Number(option.id))
		},
		data() {
			return {
				evaluateList:[
					{
						negativeComment:true,
						praise:true,
						
					},
					{	
						negativeComment:true,
						praise:true,
						
					},
					{
						negativeComment:true,
						praise:true,
					
					},
					{
						negativeComment:true,
						praise:true,
					
					},
				],
				font:'',
				orderId :'',
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						// color: "#ff5a5f",
						width: 2,
						// style: 'dashed',
						radius: '4rpx'
					}
				},
			};
		},
		methods:{
			//评论订单，修改订单状态
			SubmitComments(e){
				// orderId = uni.getStorage("orderId")
				console.log("orderId",e);
				CommentOrder({
					comment:this.font,
					orderId:this.orderId
				}).then(res=>{
					console.log("评论订单",res);
				})
			},
			//差评
			NonegativeCommentCicktwo(index){
				console.log(555);
				this.evaluateList[index].negativeComment = false
				console.log("ff",this.evaluateList[index].negativeComment);
				if(this.evaluateList[index].praise == false){
					this.evaluateList[index].praise = true
				}
			},
			negativeCommentCicktwo(index){
				console.log(555);
				this.evaluateList[index].negativeComment = true
				console.log("tt",this.evaluateList[index].negativeComment);
				
			},
			//好评
			noPraiseClick(index){
				this.evaluateList[index].praise = false
				if(this.evaluateList[index].negativeComment==false){
					this.evaluateList[index].negativeComment = true
				}
			},
			praiseClick(index){
				this.evaluateList[index].praise = true
			},
			// 获取上传状态
			select(e) {
				console.log('选择文件：', e)
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},
			
			// 上传成功
			success(e) {
				console.log('上传成功')
			},
			
			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			}
		}
	}
</script>

<style lang="scss" scoped>
.top {
		// height: 900rpx;
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin-top: 24rpx;
		margin-left: 24rpx;
		display: flex;
		flex-direction: column;

		.top-font {
			width: 300rpx;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 1000;
			font-size: 32rpx;
			line-height: 32rpx;
			color: #121B36;
			margin-top: 24rpx;
			margin-left: 24rpx;
		}

		.top-content {
			width: 654rpx;
			height: 300rpx;
			background: #F9F9F9;
			margin-top: 24rpx;
			margin-left: 24rpx;
			textarea{
				width: 630rpx;
				height: 150rpx;
				margin-top: 24rpx;
				margin-left: 24rpx;
				// border: #121B36 1rpx solid;
			}
			uni-file-picker{
				margin-top: 24rpx;
				margin-left: 24rpx;
			}
			
		}
		
		.top-button{
			width: 100%;
			// height: 300rpx;
			// background-color: aqua;
			margin-top: 48rpx;
			display: flex;
			flex-direction: column;
			.top-button-content{
				width: 630rpx;
				height: 64rpx;
				// background-color: aquamarine;
				margin-top: 24rpx;
				margin-left: 24rpx;
				margin-bottom: 24rpx;
				display: flex;
				justify-content: space-between;
				.top-button-content-img{
					height: 64rpx;
					width: 200rpx;
					// background-color: brown;
					display: flex;
					.top-button-content-img-img{
						height: 64rpx;
						width: 64rpx;
						image{
							height: 64rpx;
							width: 64rpx;
							background-size: 100%;
						}
					}
					.top-button-content-img-name{
						font-family: 'PingFang SC';
						font-style: normal;
						font-weight: 500;
						font-size: 34rpx;
						line-height: 64rpx;
						color: #000000;
						flex: none;
						order: 1;
						flex-grow: 0;
					}
				}
				.top-button-evaluate{
					width: 250rpx;
					height: 64rpx;
					// background-color: burlywood;
					display: flex;
					justify-content: space-around;
					image{
						margin-top: 17rpx;
						height: 26rpx;
						width: 28rpx;
					}
					text{
						
						font-family: 'PingFang SC';
						font-style: normal;
						font-weight: 400;
						font-size: 24rpx;
						line-height: 64rpx;
						color: #8C8C8C;
					}
				}
			}
		}
		
		
		
	}
	
	/deep/.icon-add {
		width: 40rpx !important;
	}
	.application{
		position: fixed;
		bottom: 48rpx;
		margin-left: 50%;
		transform: translate(-50%);
		border: 2rpx solid #8C8C8C;
		border-radius: 12rpx;
		width: 702rpx;
		height: 76rpx;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 800;
		font-size: 36rpx;
		line-height: 76rpx;
		text-align: center;
		color: #8C8C8C;
	}
	.applicationtwo{
		position: fixed;
		bottom: 48rpx;
		margin-left: 50%;
		transform: translate(-50%);
		border: 2rpx solid #FB7A42;
		border-radius: 12rpx;
		width: 702rpx;
		height: 76rpx;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 800;
		font-size: 36rpx;
		line-height: 76rpx;
		text-align: center;
		color: #FB7A42;
	}
</style>
